<template>
  <div class="mod-menu">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="0"></el-tab-pane>
      <el-tab-pane label="待发货订单" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="待备货订单" name="2"></el-tab-pane> -->
      <el-tab-pane label="待收货订单" name="3"></el-tab-pane>
      <!-- <el-tab-pane label="待自提订单" name="4"></el-tab-pane> -->
    </el-tabs>
    <div class="mt30">
      <el-form :inline="true" :model="params">
        <el-form-item label="订单编号">
          <el-input
            v-model="params.order_code"
            placeholder="请输入订单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="支付订单号">
          <el-input
            v-model="params.pay_order_code"
            placeholder="请输入支付订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="下单人手机号码">
          <el-input
            v-model="params.order_creator_mobile"
            type="number"
            placeholder="请输入下单人手机号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input
            v-model="params.receiver"
            placeholder="请输入收货人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号码">
          <el-input
            v-model="params.mobile"
            type="number"
            placeholder="请输入收货人手机号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input
            v-model="params.shop_name"
            placeholder="请输入店铺名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select
            v-model="params.marketing_type"
            clearable
            placeholder="请选择订单类型"
          >
            <el-option label="商家订单" :value="0"></el-option>
            <el-option label="秒杀订单" :value="1"></el-option>
            <el-option label="拼团订单" :value="2"></el-option>
            <el-option label="惠选区订单" :value="-1"></el-option>
            <el-option label="惠选区金额10000以上的订单" :value="-2"></el-option>
            <el-option label="兑换区订单" :value="-3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单类别">
          <el-select
            v-model="params.third"
            clearable
            placeholder="请选择订单类别"
          >
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="普通订单" :value="0"></el-option>
            <el-option label="第三方订单" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select
            v-model="params.pay_mode"
            clearable
            placeholder="请选择支付方式">
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="余额" :value="0"></el-option>
            <el-option label="微信" :value="1"></el-option>
            <el-option label="支付宝" :value="2"></el-option>
            <el-option label="银行线下" :value="3"></el-option>
            <el-option label="现金支付" :value="4"></el-option>
            <el-option label="积分支付" :value="5"></el-option>
            <el-option label="积分+余额支付" :value="6"></el-option>
            <el-option label="积分+微信支付" :value="7"></el-option>
            <el-option label="积分+支付宝支付" :value="8"></el-option>
            <el-option label="公益积分" :value="9"></el-option>
            <el-option label="支付宝（汇付）" :value="10"></el-option>
            <el-option label="积分+支付宝（汇付）" :value="11"></el-option>
            <el-option label="支付宝（慧收钱）" :value="12"></el-option>
            <el-option label="积分+支付宝（慧收钱）" :value="13"></el-option>
            <el-option label="快捷支付" :value="14"></el-option>
            <el-option label="积分+快捷支付" :value="15"></el-option>
            <el-option label="快钱支付宝支付" :value="16"></el-option>
            <el-option label="快钱微信支付" :value="17"></el-option>
            <el-option label="快钱支付" :value="18"></el-option>
            <el-option label="兑换券支付" :value="19"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model='params.withClosed'>包含关闭的订单</el-checkbox>
        </el-form-item>
        <el-form-item label="订单时间">
          <el-date-picker
            v-model="timer"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleTimer"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadListOne()">查询</el-button>
          <el-button type="primary" @click="exportAll()">导出数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-data" v-loading="tableLoading" v-if="dataList.length > 0">
      <div v-for="(item, index) in dataList" :key="index">
        <div class="title-div">
          <div class="flexcenter">
            <span>订单号： {{ item.order_code }}</span>
            <span class="ml10">支付订单号：{{ item.pay_order_code }}</span>
            <div class="ml10 text-1">店铺名称：{{ item.shop_name }}</div>
            <el-tag class="ml10 thirdColor" color="#30b885">{{
              item.third ? '第三方订单' : '普通订单'
            }}</el-tag>

            <label class="ml10 wechatpay" v-if="item.exchange"> 积分兑换</label>
            <label class="ml10" v-if="item.exchange && item.total_amount > 0"
              >+</label
            >

            <template v-if="item.total_amount > 0">
              <label
                class="ml10"
                :class="
                  item.pay_mode == 1
                    ? 'wechatpay'
                    : item.pay_mode == 2
                    ? 'alipay'
                    : 'platformpay'
                "
              >
                <!-- {{ item.pay_mode == 1 ? '微信支付' : item.pay_mode == 2 ? '支付宝支付' : '余额支付' }} -->
                <span v-if="item.pay_mode == 0">余额支付</span>
                <span v-if="item.pay_mode == 1">微信支付</span>
                <span v-if="item.pay_mode == 2">支付宝支付</span>
                <span v-if="item.pay_mode == 3">银行线下支付</span>
                <span v-if="item.pay_mode == 4">现金支付</span>
                <span v-if="item.pay_mode == 5">积分支付</span>
                <span v-if="item.pay_mode == 6">积分 + 余额 支付</span>
                <span v-if="item.pay_mode == 7">积分 + 微信 支付</span>
                <span v-if="item.pay_mode == 8">积分 + 支付宝 支付</span>
                <span v-if="item.pay_mode == 9">公益积分支付</span>
                <span v-if="item.pay_mode == 10">支付宝支付(Adapay)</span>
                <span v-if="item.pay_mode == 12">支付宝支付(慧收钱)</span>
                <span v-if="item.pay_mode == 14">银行卡支付</span>
                <span v-if="item.pay_mode == 15">积分+快捷支付</span>
                <span v-if="item.pay_mode == 16">快钱支付宝支付</span>
                <span v-if="item.pay_mode == 17">快钱微信支付</span>
                <span v-if="item.pay_mode == 18">快钱支付</span>
                <span v-if="item.pay_mode == 19">兑换券支付</span>
              </label>
            </template>
          </div>
          <div>
            <el-button
              class="c-info"
              type="text"
              size="small"
              @click="viewHandle(item)"
              >查看</el-button
            >
            <!-- <el-button class="c-success" v-if="item.shipment_mode == 0 && item.transaction_status == 3" type="text" size="small"
              @click="viewLogistics(item)">查看物流信息
            </el-button> -->
          </div>
        </div>
        <div
          class="table-content"
          v-for="(v, i) in item.child_order_list"
          :key="i"
        >
          <div class="goods-info">
            <div class="good-img-div">
              <img :src="v.goods_img" />
            </div>
            <div class="info">
              <div class="goods-title">{{ v.goods_title }}</div>
              <div class="price" v-if="v.exchange">{{ v.total_point }}积分</div>
              <div class="price" v-else>￥{{ v.real_price }}</div>
              <div class="remark">{{ v.sku_set_name }}</div>
            </div>
          </div>
          <div class="tc">
            <div v-if="v.exchange">{{ v.total_point }}积分</div>
            <div v-else>{{ v.total_real_price }}</div>
            <div>({{ v.number }}{{ v.unit }})</div>
          </div>
          <div class="tc">
            <div>下单账号：</div>
            <div>{{ item.mobile }}</div>
            <div>↓</div>
            <div v-if="item.receipt">收货人：{{ item.receipt.receiver }}</div>
            <div v-if="item.receipt">
              {{ item.receipt && item.receipt.mobile }}
            </div>
            <div v-if="item.self_take">{{ item.self_take.receiver }}</div>
            <div v-if="item.self_take">{{ item.self_take.mobile }}</div>
          </div>
          <div class="tc">
            <el-tag>
              {{
                v.marketing_type == 1
                  ? '秒杀订单'
                  : v.marketing_type == 2
                    ? '拼团订单'
                    : v.marketing_type == 0
                      ? '商家订单'
                      : v.marketing_type == -1
                        ? '惠选区订单'
                        : v.marketing_type == -2
                          ? '惠选区金额10000以上的订单'
                          : v.marketing_type == -3
                            ? '兑换区订单'
                            : ''
              }}
            </el-tag>
          </div>
          <div class="tc">
            <el-tag type="primary" v-if="v.transaction_status == 0"
              >待支付</el-tag
            >
            <el-tag type="warning" v-if="item.marketing_type == 2">{{
              item.team.status < 2
                ? '待成团'
                : item.team.status > 2
                ? '拼团失败'
                : '拼团成功'
            }}</el-tag>
            <el-tag
              type="warning"
              v-if="
                v.transaction_status == 1 &&
                v.rights_status == 0 &&
                item.effective
              "
              >{{ item.shipment_mode == 1 ? '待备货' : '待发货' }}</el-tag
            >
            <el-tag
              type="warning"
              v-if="
                v.transaction_status == 2 &&
                v.rights_status == 0 &&
                item.effective
              "
              >{{ item.shipment_mode == 1 ? '部分备货' : '部分发货' }}</el-tag
            >
            <el-tag
              type="danger"
              v-if="v.transaction_status == 3 && v.rights_status == 0"
              >{{ item.shipment_mode == 1 ? '待自提' : '待收货' }}</el-tag
            >
            <el-tag
              type="success"
              v-if="v.transaction_status == 5 && v.rights_status == 0"
              >交易完成</el-tag
            >
            <el-tag
              type="info"
              v-if="v.transaction_status == 6 || v.rights_status == 2"
              >关闭</el-tag
            >
            <el-tag type="info" v-if="v.rights_status == 1">维权中</el-tag>
          </div>
          <div class="tc">
            {{ v.create_time }}
          </div>
        </div>
        <div class="table-foot">
          <label class="freight" v-if="item.first_order_reduced"
            >首单优惠：<label>￥{{ item.first_order_reduced }}</label></label
          >
          <label class="ml10 freight">{{
            item.real_freight ? '运费：￥' + item.real_freight : '免运费'
          }}</label>
          <label class="ml10" v-if="item.total_amount > 0"
            >实付金额：<label class="price"
              >￥ {{ item.total_amount }}</label
            ></label
          >
          <label class="ml10" v-if="item.total_point > 0"
            >实付积分：<label> {{ item.total_point }}</label></label
          >
        </div>
      </div>
    </div>
    <div v-if="dataList.length == 0" class="no-data">暂无数据</div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="params.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 详情 -->
    <el-dialog
      :title="`订单[${info.order_code}]的详情`"
      top="5vh"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <orderDetail ref="orderDetail"></orderDetail>
    </el-dialog>
    <!-- 发货 核销 -->
    <deliver-goods
      @result="result('deliverGoods')"
      v-if="deliverGoods"
      ref="deliverGoods"
    ></deliver-goods>
    <verification
      @result="result('verification')"
      v-if="verification"
      ref="verification"
    ></verification>
    <!-- 物流详情 -->
    <goodStreamDetail
      @result="goodStreamVisible = false"
      v-if="goodStreamVisible"
      ref="goodStream"
    ></goodStreamDetail>
  </div>
</template>

<script>
import orderService from '@/api/orderService.js'
// 发货
import deliverGoods from '../../merchant/order/deliver-goods.vue'
// 核销
import verification from '../../merchant/order/verification.vue'
import Vue from 'vue'
import orderDetail from '../../merchant/order/orderDetail.vue'
import goodStreamDetail from '../../merchant/order/goodStreamDetail.vue'
import TemplateFreight from '../../merchant/set/template-freight.vue'
export default {
  data() {
    return {
      params: {
        limit: 10,
        page: 1,
        withClosed: true,
        transaction_status: '', // 交易状态
        marketing_type: '', // 秒杀&拼团
        order_code: '', // 订单编号
        shipment_mode: '', // 出货方式
        pay_order_code: '', // 支付订单号
        receiver: '', // 收货人
        mobile: '', // 收货人手机
        order_creator_mobile: '', // 下单人手机
        shop_name: '', // 店铺名称
        startTime: undefined,
        endTime: undefined,
        third: -1,
        pay_mode: -1
      },
      total: null,
      activeName: 0,
      dataList: [],
      tableLoading: false,
      dataListLoading: false,
      addOrUpdateVisible: false,
      deliverGoods: false, // 发货
      verification: false, // 核销
      info: {},
      dialogVisible: false,
      goodStreamVisible: false, // 物流详情
      currUpdate: null,
      editPriceParam: {
        order_id: null,
        child_order_id: null,
        result_price: null
      },
      timer: null
    }
  },
  components: {
    deliverGoods,
    verification,
    orderDetail,
    goodStreamDetail,
    TemplateFreight
  },
  created() {
    this.loadList()
  },
  methods: {
    handleTimer(e) {
      if (e) {
        this.params.startTime = e && e[0]
        this.params.endTime = e && e[1]
      } else {
        this.params.startTime = undefined
        this.params.endTime = undefined
      }
    },
    // 导出数据
    exportAll() {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          window.location.href = `${this.$config.SERVER_URL}/admin/saleorder/exportAll?order_code=${this.params.order_code}&shipment_mode=${this.params.shipment_mode}&transaction_status=${this.params.transaction_status}&pay_order_code=${this.params.pay_order_code}&mobile=${this.params.mobile}&order_creator_mobile=${this.params.order_creator_mobile}&receiver=${this.params.receiver}&shop_name=${this.params.shop_name}&marketing_type=${this.params.marketing_type}&startTime=${this.params.startTime}&endTime=${this.params.endTime}&third=${this.params.third}&withClosed=${this.params.withClosed}&token=${token}&pay_mode=${this.params.pay_mode}&third=${this.params.third}&shop_name=${this.params.shop_name}`
        })
        .catch(() => {})
    },
    init() {
      this.params = {
        limit: 10,
        page: 1,
        transaction_status: '', // 交易状态
        marketing_type: '', // 秒杀&拼团
        order_code: '', // 订单编号
        shipment_mode: '', // 出货方式
        pay_order_code: '', // 支付订单号
        receiver: '', // 收货人
        mobile: '', // 收货人手机
        order_creator_mobile: '', // 下单人手机
        shop_name: '', // 店铺名称
        third: -1,
        pay_mode: -1
      }
      this.timer = null
      this.params.startTime = undefined
      this.params.endTime = undefined
    },
    loadList() {
      this.tableLoading = true
      orderService
        .platformViewOrder(this.params)
        .then((res) => {
          if (res.data && res.data.code == 200) {
            this.dataList = res.data.page.list
            this.total = res.data.page.totalCount
          }
          this.tableLoading = false
        })
        .then((res) => {
          this.tableLoading = false
        })
    },
    loadListOne() {
      this.params.page = 1
      this.loadList()
    },
    handleClick(e) {
      this.init()
      if (e.name == 0) {
        this.params.transaction_status = null
        this.params.shipment_mode = null
      } else if (e.name == 1) {
        // 待发货
        this.params.transaction_status = 1
        this.params.shipment_mode = 0
      } else if (e.name == 2) {
        // 待备货
        this.params.transaction_status = 1
        this.params.shipment_mode = 1
      } else if (e.name == 3) {
        // 待收货
        this.params.transaction_status = 3
        this.params.shipment_mode = 0
      } else if (e.name == 4) {
        // 待自提
        this.params.transaction_status = 3
        this.params.shipment_mode = 1
      }
      this.loadList()
    },
    handleSizeChange(e) {
      this.params.limit = e
      this.params.page = 1
      this.loadList()
    },
    handleCurrentChange(e) {
      this.params.page = e
      this.loadList()
    },
    result(e) {
      this[e] = false
      this.loadList()
    },
    /**
     * 发货
     * */
    shipmentsMethod(item) {
      this.deliverGoods = true
      this.$nextTick(() => {
        this.$refs.deliverGoods.init(item)
      })
    },

    // 备货
    stockUp(item) {
      orderService
        .stockUp({
          order_id: item.id
        })
        .then((res) => {
          if (res.data && res.data.code == 200) {
            this.$message.success('备货成功！')
            this.loadList()
          }
        })
    },

    /**
     * 核销
     * */
    verificationMethod(item) {
      this.verification = true
      this.$nextTick(() => {
        this.$refs.verification.init(item)
      })
    },

    /**
     * 修改物流信息
     * */
    updateShipments(item) {
      this.deliverGoods = true
      this.$nextTick(() => {
        this.$refs.deliverGoods.init(item, 'update')
      })
    },

    /* 查看物流信息 */
    viewLogistics(item) {
      this.goodStreamVisible = true
      this.$nextTick(() => {
        this.$refs.goodStream.init(item)
      })
    },

    /**
     * 查看详情
     * */
    viewHandle(item) {
      this.info = item
      this.dialogVisible = true
      orderService.platformOrderInfo(item.id).then((res) => {
        if (res.data && res.data.code == 200) {
          this.$refs.orderDetail.init(res.data.data)
        }
      })
    },

    /**
     * 打开修改金额
     * */
    updatePrice(v) {
      if (v) {
        this.currUpdate = v.id
        this.editPriceParam.order_id = v.order_id
        this.editPriceParam.child_order_id = v.id
      }
    },

    submitPrice(v) {
      this.editPriceParam.result_price = v.real_price
      console.log(this.editPriceParam)
      orderService.updatePrice(this.editPriceParam).then((res) => {
        if (res.data && res.data.code == 200) {
          this.$message.success('修改成功！')
          this.currUpdate = null
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.mt30 {
  margin-top: 30px;
}

.flexcenter {
  display: flex;
  align-items: center;
}

.thirdColor {
  color: #fff;
}

.text-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}

.good-img-div {
  img {
    width: 85px;
    height: 85px;
    display: flex;
  }
}

.flex_bet {
  display: flex;
  justify-content: space-between;
}

.title-div {
  padding: 0 30px;
  height: 40px;
  background-color: #e5e5e5;
  color: #333333;
  line-height: 40px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.tc {
  text-align: center;
}

.table-data {
  .alipay {
    color: #009fe8;
  }

  .wechatpay {
    color: #1aad19;
  }

  .platformpay {
    color: #17b3a3;
  }

  > div {
    border: 1px solid #f0f0f0;
  }

  .table-content {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;

    > div {
      min-width: 15%;
    }

    .goods-info {
      display: flex;
      align-items: center;
      width: 20%;

      .info {
        text-align: left;
        margin-left: 10px;
        width: 60%;
      }

      .goods-title {
        font-size: 14px;
        height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .remark {
        font-size: 12px;
        color: #b1b1b1;
      }

      .price {
        font-size: 14px;
        color: #f3415f;
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        i {
          cursor: pointer;
        }
      }

      .price > input {
        border: none;
        color: #f3415f;
        width: auto;
        width: 50%;
        padding: 5px;
        margin: 0 2px;
        box-sizing: border-box;
        // transition: all .3s;
      }

      input:focus {
        outline: unset;
      }
    }
  }

  .table-foot {
    height: 40px;
    text-align: right;
    color: #333333;
    line-height: 40px;
    font-size: 14px;
    padding: 0 15px;

    .price {
      color: #f3415f;
    }

    .freight {
      color: #b1b1b1;
      margin-right: 10px;
    }
  }
}

.ml10 {
  margin-left: 10px;
}

.can-input {
  border: 1px solid #dfdfdf !important;
  border-radius: 2px;
}
</style>
